window.onload = function () {
  // 当点击某一个li的时候，该li添加下边线  bottomColor
  var lis = document.querySelectorAll(".aside .nav .nav li");
  var Aa = document.querySelectorAll(".aside .nav .nav li a");
  var oUl = document.querySelectorAll(".aside .nav .nav li ul");
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].addEventListener("click", function () {
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "bottomColor";
    });
  }
  // 让a字体改变颜色
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].addEventListener("click", function () {
      for (var i = 0; i < Aa.length; i++) {
        Aa[i].classList.remove("blue");
      }
      this.classList.add("blue");
    });
  }
  // 显示与隐藏
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].onclick = function () {
      var uls = this.nextElementSibling;
      if (getComputedStyle(uls).height == "0px") {
        for (var j = 0; j < oUl.length; j++) {
          oUl[j].style.height = "0px";
        }
        uls.style.height =
          uls.children[0].offsetHeight * uls.children.length + "px";
      } else {
        uls.style.height = "0px";
      }
    };
  }
  var data = [
    {
      num: 1,
      name: "李四",
      id: 513092399809142022,
      age: "22",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202208620",
    },
    {
      num: 2,
      name: "张三",
      id: 513092399800142022,
      age: "28",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202208620",
    },
    {
      num: 3,
      name: "随便",
      id: 513092399859142022,
      age: "50",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202268209",
    },
    {
      num: 4,
      name: "王五",
      id: 813092399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "13356738907",
    },
    {
      num: 5,
      name: "小红",
      id: 513092399809142022,
      age: "24",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "14567890345",
    },
    {
      num: 6,
      name: "小明",
      id: 113092399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-1",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12230220820",
    },
    {
      num: 7,
      name: "李四",
      id: 813092399809142002,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202208420",
    },
    {
      num: 8,
      name: "李四",
      id: 813092399309142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202520820",
    },
    {
      num: 9,
      name: "李四",
      id: 813092398809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12204220820",
    },
    {
      num: 10,
      name: "李四",
      id: 873092399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12206220820",
    },
    {
      num: 11,
      name: "李四",
      id: 913092399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202820820",
    },
    {
      num: 12,
      name: "李四",
      id: 813092369809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202620820",
    },
    {
      num: 13,
      name: "李四",
      id: 813052399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202420820",
    },
    {
      num: 14,
      name: "李四",
      id: 8130923998549142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202320820",
    },
    {
      num: 15,
      name: "李四",
      id: 813092399209142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202920820",
    },
    {
      num: 16,
      name: "李四",
      id: 813092369809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12204220820",
    },
    {
      num: 17,
      name: "李四",
      id: 813092399809042022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202820820",
    },
    {
      num: 18,
      name: "李四",
      id: 813096399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202720820",
    },
    {
      num: 19,
      name: "李四",
      id: 813082399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202520820",
    },
    {
      num: 20,
      name: "李四",
      id: 613092399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202420820",
    },
    {
      num: 21,
      name: "李四",
      id: 513092399809142022,
      age: "23",
      sex: "男",
      oldAddress: "浙江省宁波市镇海区3-8-0",
      nowAddress: "四川省成都市双流区华阳街道1-3-7",
      tel: "12202203820",
    },
  ];
  var page = 1;
  var count = 6;
  var searchBtn = document.querySelector(".searchBtn");
  var searchInp = document.querySelector(".searchInp");
  var oTbody = document.querySelector("tbody");
  var pagination = document.querySelector(".pagination");
  var prev = document.querySelector(".prev");
  var next = document.querySelector(".next");
  var addBtn = document.querySelector(".addBtn");
  var forms = document.querySelector(".addFrom"); //新增表单
  var inp = document.querySelectorAll(".addFrom #addModal input"); //新增下面所有的input
  var saveBtn = document.querySelector(".saveBtn");
  var showPass = document.querySelector("#showPass");
  var showNoPass = document.querySelector("#showNoPass");
  var rePass = document.querySelector("#rePass");
  var reNoPass = document.querySelector("#reNoPass");
  function application() {
    // 搜索
    var contents = searchInp.value;
    // console.log(contents);
    // alert(contents)
    var contentsArr = [];
    for (var i = 0; i < data.length; i++) {
      if (contents.trim() == "") {
        contentsArr = data;
      } else {
        if (data[i].name.includes(contents) || data[i].tel.includes(contents)) {
          contentsArr.push(data[i]);
        }
      }
    }
    // 数据的插入
    oTbody.innerHTML = "";
    var addArr = contentsArr.slice((page - 1) * count, page * count);
    for (var i = 0; i < addArr.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
      <td>${addArr[i].num}</td>
      <td>${addArr[i].name}</td>
      <td>${addArr[i].id}</td>
      <td>${addArr[i].age}</td>
      <td>${addArr[i].sex}</td>
      <td>${addArr[i].oldAddress}</td>
      <td>${addArr[i].nowAddress}</td>
      <td>${addArr[i].tel}</td>
      <td>
          <button type="button" class="btn btn-info detail" data-toggle="modal" data-target="#detailModal">编辑</button>
          <button type="button" class="btn btn-success pass"  data-toggle="modal" data-target="#passModal">通过</button>
          <button type="button" class="btn btn-warning noPass" data-toggle="modal" data-target="#noPassModal">不通过</button>
      </td>
      `;
      oTbody.appendChild(oTr);
    }
    // 页码的插入
    var pageBtn = document.querySelectorAll(".pageBtn");
    // 删除所有的页码
    for (var i = 0; i < pageBtn.length; i++) {
      pagination.removeChild(pageBtn[i].parentNode);
    }
    // 根据数据的长度重新添加页码
    for (var i = 1; i <= Math.ceil(contentsArr.length / count); i++) {
      var oLi = document.createElement("li");
      oLi.innerHTML = `<a href="#" class="pageBtn">${i}</a></li>`;
      if (i == page) {
        oLi.classList.add("active");
      }
      pagination.insertBefore(oLi, pagination.lastElementChild);
    }
  }
  application();
  // 当点击搜索按钮的时候
  searchBtn.addEventListener("click", function () {
    page = 1;
    application();
  });
  // 当按下回车键的时候
  searchInp.addEventListener("keyup", function () {
    // console.log(keyCode);
    if (event.keyCode == 13) {
      page = 1;
      application();
    }
    event.preventDefault();
  });
  //  当点击分页按钮的时候
  pagination.addEventListener("click", function () {
    if (event.target.className == "pageBtn") {
      page = event.target.innerText;
      application();
    }
  });
  prev.addEventListener("click", function () {
    if (page > 1) {
      page--;
      application();
    }
  });
  next.addEventListener("click", function () {
    if (page < Math.ceil(data.length / count)) {
      page++;
      application();
    }
  });
  // 表单验证
  var rules = {
    // 账号
    num: {
      reg: /^\d{1,5}$/,
      info: "请输入正确的账号信息",
    },
    // 姓名
    name: {
      reg: /^([\u4e00-\u9fa5]{2,6})$/,
      info: "请输入2-6位中文姓名",
    },
    // 身份证号码
    idCard: {
      reg: /^\d{15}|\d{}18$ /,
      info: "请正确输入您的身份证号码",
    },
    // 年龄
    age: {
      reg: /^([0-9]\d|100)$/,
      info: "年龄过大",
    },
    // 性别
    sex: {
      reg: /^[男|女]{1}$/,
      info: "请输入“男”或者“女”",
    },
    // 地址
    oldAddress: {
      reg: /^([\u4e00-\u9fa5]{6,34})$/,
      info: "请输入具体的地址",
    },
    // 地址
    nowAddress: {
      reg: /^([\u4e00-\u9fa5]{6,34})$/,
      info: "请输入具体的地址",
    },
    // 手机号
    tel: {
      reg: /^(1[3-9]\d{9})$/,
      info: "请输入11位有效的电话号码",
    },
  };
  // 当表单里的input失去焦点的时候
  for (var i = 0; i < inp.length; i++) {
    inp[i].addEventListener("blur", function () {
      var str = this.value;
      if (str.trim() == "") {
        this.parentNode.nextElementSibling.innerHTML = "内容不能为空";
        this.parentNode.nextElementSibling.classList.add("red");
      } else if (rules[this.name].reg.test(str) == false) {
        this.parentNode.nextElementSibling.innerHTML = rules[this.name].info;
        this.parentNode.nextElementSibling.classList.add("red");
      } else {
        this.parentNode.nextElementSibling.innerHTML = "√";
        this.parentNode.nextElementSibling.classList.add("right");
      }
    });
  }
  // 当提交表单的时候
  forms.addEventListener("submit", function () {
    var temp = true;
    for (var j = 0; j < inp.length; j++) {
      var str = inp[j].value;
      if (str.trim() == "") {
        inp[j].parentNode.nextElementSibling.innerHTML = "内容不能为空";
        inp[j].parentNode.nextElementSibling.classList.add("red");
        temp = false;
      } else if (rules[this.name].reg.test(str) == false) {
        inp[j].parentNode.nextElementSibling.innerHTML =
          rules[inp[j].name].info;
        inp[j].parentNode.nextElementSibling.classList.add("red");
        temp = false;
      } else {
        inp[j].parentNode.nextElementSibling.innerHTML = "√";
        inp[j].parentNode.nextElementSibling.classList.add("right");
      }
    }
    if (temp == false) {
      event.preventDefault();
      $("#addModal").modal("show"); // 隐藏模态框
    }
  });
  // 当点击新增的时候
  addBtn.addEventListener("click", function () {
    var addId = document.querySelector(".addId").value;
    var addName = document.querySelector(".addName").value;
    var addCard = document.querySelector(".addCard").value;
    var addAge = document.querySelector(".addAge").value;
    var addSex = document.querySelector(".addSex").value;
    var addOldAddress = document.querySelector(".addOldAddress").value;
    var addNewAddress = document.querySelector(".addNewAddress").value;
    var addTel = document.querySelector(".addTel").value;
    data.push({
      num: addId,
      name: addName,
      id: addCard,
      age: addAge,
      sex: addSex,
      oldAddress: addOldAddress,
      nowAddress: addNewAddress,
      tel: addTel,
    });
    application();
    $("#addModal").modal("hide");
  });
  // 当点击编辑的时候
  oTbody.addEventListener("click", function () {
    if (event.target.className.includes("detail")) {
      var id = event.target.parentNode.parentNode.children[0].innerText;
      // console.log(id);
      for (var i = 0; i < data.length; i++) {
        if (data[i].num == id) {
          document.querySelector(".editId").value = data[i].num;
          document.querySelector(".editName").value = data[i].name;
          document.querySelector(".editCard").value = data[i].id;
          document.querySelector(".editAge").value = data[i].age;
          document.querySelector(".editSex").value = data[i].sex;
          document.querySelector(".editOldAddress").value = data[i].oldAddress;
          document.querySelector(".editNewAddress").value = data[i].nowAddress;
          document.querySelector(".editTel").value = data[i].tel;
        }
      }
    }
  });
  //  当点击保存的时候
  saveBtn.addEventListener("click", function () {
    var id = document.querySelector(".editId").value;
    for (var i = 0; i < data.length; i++) {
      if (data[i].num == id) {
        data[i].num = document.querySelector(".editId").value;
        data[i].name = document.querySelector(".editName").value;
        data[i].id = document.querySelector(".editCard").value;
        data[i].age = document.querySelector(".editAge").value;
        data[i].sex = document.querySelector(".editSex").value;
        data[i].oldAddress = document.querySelector(".editOldAddress").value;
        data[i].nowAddress = document.querySelector(".editNewAddress").value;
        data[i].tel = document.querySelector(".editTel").value;
      }
    }
    $("#detailModal").modal("hide");
    application();
  });
  // 当点击通过和不通过的时候
  var passId;
  var noPassId;
  oTbody.addEventListener("click", function () {
    // 通过
    if (event.target.className.includes("pass")) {
      passId = event.target.parentNode.parentNode.children[0].innerText;
      // console.log(passId);
      for (var i = 0; i < data.length; i++) {
        if (data[i].num == passId) {
          // console.log(showPass.innerHTML);
          showPass.innerHTML =
            "您当前正在操作" +
            data[i].name +
            "的相关信息,您确定通过该用户的申请吗？";
        }
      }
      application();
    }
    // 不通过
    if (event.target.className.includes("noPass")) {
      noPassId = event.target.parentNode.parentNode.children[0].innerText;
      // console.log(id);
      for (var i = 0; i < data.length; i++) {
        if (data[i].num == noPassId) {
          // console.log(showPass.innerHTML);
          showNoPass.innerHTML =
            "您当前正在操作" +
            data[i].name +
            "的相关信息,您确定不通过该用户的申请吗？";
        }
      }
      application();
    }
  });
  //  当点击确认通过、确认不通过的时候
  rePass.addEventListener("click", function () {
    $("#passModal").modal("hide");
    // console.log(passId)
    clearInterval(timer);
    var timer = setInterval(function () {
      $("#rePassBoxModal").modal("hide");
    }, 2000);
    for (var i = 0; i < data.length; i++) {
      // console.log(data[i].num)
      if (data[i].num == passId) {
        // console.log(data.splice(i,1));
        data.splice(i, 1);
      }
    }
    application();
  });
  //  当点击确认通过、确认不通过的时候
  reNoPass.addEventListener("click", function () {
    $("#noPassModal").modal("hide");
    // console.log(noPassId);
    // clearInterval(time);
    var time = setInterval(function () {
      $("#noRePassBoxModal").modal("hide");
    }, 2000);
    console.log(time)
    for (var i = 0; i < data.length; i++) {
      // console.log(data[i].num)
      if (data[i].num == noPassId) {
        data.splice(i, 1);
      }
    }
    application();
  });
};
